<template>
    <div class="ff-more-screen">
        <div class="ff-more-screen-control">
            <div class="ff-more-screen-tips">
                <i class="iconfont icon-shaixuan"></i>
                <span>在当前结果中搜索</span>
            </div>
            <div class="ff-more-screen-btn" @click="screenShow = !screenShow">
                <span>{{screenShow?'收起':'展开'}}</span>
                <i class="iconfont" :class="screenShow? 'icon-shangjiantou' : 'icon-jiantou'"></i>
            </div>
        </div>
        <div class="ff-more-screen-show" v-show="screenShow">
            <screen
                v-for="(option, index) in srceenOptions"
                :section="index === srceenOptions.length - 1"
                :title="option.cname"
                :options="option.list"
                :code="option.ename"
                :key="option.ename"
                @confirm="handleConfirm"
            >
            </screen>
        </div>
    </div>
</template>
<script>
    import screen from '@/components/recommend/screen.vue'
    export default {
        props: {
            season: {
                type: Boolean,
                default: true
            },//是否显示季节
        },
        data() {
            return {
                srceenOptions: [],
                screenShow: false,//控制筛选的显示
            }
        },
        components: {
            screen
        },
        methods: {
            /*筛选*/
            handleConfirm () {
                let filtersId = {}, filtersCode = {};
                this.srceenOptions.map(obj => {
                    if(obj.code === 'price') {
                        filtersId[obj.code] = obj.list;
                        filtersCode[obj.code] = obj.list;
                    }else {
                        filtersId[obj.code] = obj.list.filter(n => n.checked).map(child => child.ID);
                        filtersCode[obj.code] = obj.list.filter(n => n.checked).map(child => child.code);
                    }
                })
                this.$emit('selection-id', filtersId);
                this.$emit('selection-code', filtersCode);
            },
            /*获取过滤条件*/
            fliterData () {
                this.$http({
                    url: '/api/SelPro/GetFilterList',
                    method: 'post',
                    data: {
                        strId: this.$store.state.userId
                    }
                }).then(res => {
                    let data = res.data;
                    if(data.code === 1) {
                        this.srceenOptions = data.data.map(obj => {
                            return {
                                cname: obj.attrTypeName,//label
                                code: obj.attrType,
                                list: obj.filters.map(filter => {
                                    return {
                                        ENAME: filter.attrName,
                                        ID: filter.attrId,
                                        code: filter.attrCode,
                                        multChecked: false,//多选控制
                                        checked: false,//单选控制
                                    }
                                })
                            }
                        }).filter(_ => this.season? true : _.code !== 'sty_season')
                        this.srceenOptions.push({
                            list: [],
                            cname: '价格',
                            code: 'price'
                        })
                    }
                })
            }
        },
        mounted() {
            this.fliterData();
        }
    }
</script>
<style type="text/less" lang="less">
    @border-color: #DCDCDC;
    @orange: #FD6442;
    @tip-color: #666;
    @tip-icon-size: 14px;
    @btn-icon-size: 28px;
    .ff-more-screen {
        width: 100%;
        border: 1px solid @border-color;
        box-sizing: border-box;
        margin-bottom: 5px;
    }
    .ff-more-screen-control {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 32px;
        box-sizing: border-box;
        padding-left: 14px;
        .ff-more-screen-tips {
            color: @tip-color;
            i {
                color: @orange;
                font-size: @tip-icon-size;
                margin-right: 13px;
            }
        }
        .ff-more-screen-btn {
            color: #fff;
            background-color: @orange;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            width: 100px;
            height: 34px;
            i {
                font-size: @btn-icon-size;
                margin-left: 4px;
            }
        }
    }
    .ff-more-screen-show {
        border-top: 1px solid @border-color;
    }
</style>
